<template>
  <div class="mycertificate">
    <Navbar :title="'我的陪护证'"></Navbar>
    <div class="content">
      <div class="content-header">
        <span> {{ user.username }} </span>
        <span> {{user.cardID}} </span>
        <span style="display: flex" @click="changeShow">
          <img src="@/assets/tabs/qiehuan.png" alt="" />
          切换
        </span>
      </div>
      <div class="content-title">
        <h4>陪护证列表</h4>
        <span> 筛选 </span>
      </div>
      <div class="content-item" v-for="item in caregiverList" :key="item.id" @click="changeCare(item._id)">
        <div class="item-header">
          <img
            src="@/assets/tabs/111.png"
            alt=""
            style="width: 50px; height: 50px; border-radius: 50%"
          />
          <div>
            <div class="item-header-title">
              <p>
                <span style="margin-right: 10px">{{ item.name }}</span
                ><span>{{ item.checked=== 1 ? "男" : "女" }}</span>
              </p>
              <button>{{ item.status?'审核成功':'待审核' }}</button>
            </div>
            <p>身份证号：{{ item.id }}</p>
          </div>
        </div>
        <hr style="margin: 10px 0px;border: 1px solid #eee;"/>
        <div style="line-height: 30px">
          <p>住院人：{{ item.username }}</p>
          <p>住院病区:{{ item.curAddress }}</p>
        </div>
        <div
          style="
            display: flex;
            justify-content: end;
            margin-top: 15px;
            align-items: center;
          "
        >
          <button>{{ item.status ? "" : "取消申请"}}</button>
        </div>
      </div>
      <div
        style="
          height: 60px;
          width: 60px;
          position: fixed;
          bottom: 50px;
          background-color: blue;
          border-radius: 50%;
          color: white;
          right: 15px;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        <span style="font-size: 12px" @click="add">新增陪护</span>
      </div>
    </div>
    <van-popup
      v-model:show="showBottom"
      closeable
      round
      position="bottom"
      style="height: 50%; z-index: 9999"
    >
    <div class="popup">
        <h2>添加就诊人</h2>
        <div v-for="item in familyList" :key="item._id" class="popupView" @click="changeUser(item)">
          <span> {{ item.username }} </span>
          <span style="margin-left: 30px"> {{ item.cardID }} </span>
        </div>
        <div>
          <van-button
            type="primary"
            style="
              padding: 10px;
              position: fixed;
              bottom: 10px;
              left: 10px;
              right: 10px;
              border-radius: 10px;
              font-size: 16px;
            "
            @click="next"
          >
            添加就诊人
          </van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import Navbar from "./component/Navbar.vue";
import { useRouter } from "vue-router";
import { ref } from "vue";
import { onMounted } from "vue";
import axios from "axios";
const router = useRouter();
const showBottom = ref(false);

const user = ref({
  username: "小张",
  cardID: 2222222,
  _id: "1213131",
  sex: 0,
  age: 18,
  phone: 12345678901,
  address: "",
  userid: {},
  relationid: {},
});

interface familyList {
  username: string;
  _id: string;
  cardID: number;
  sex: number;
  age: number;
  phone: number;
  address: string;
  userid: any;
  relationid: any;
}

const familyList = ref<familyList[]>([]);
const caregiverList=ref<any[]>([])
onMounted(() => {
  getFamilyList();
  getCaregiverList();
});

const getCaregiverList=async()=>{
  let {data:{data}}= await axios.post('http://localhost:3000/zhc/getCaregiver')
  caregiverList.value=data
  console.log(caregiverList.value);

}
const getFamilyList = async () => {
  let {
    data: { data },
  } = await axios.post("http://localhost:3000/zhc/getFamily");
  familyList.value = data;
  console.log(familyList.value);
};


const changeUser=(item:familyList)=>{
  user.value=item
}

const next = () => {
  // router.push("/admissRegister");
};
const changeShow = () => {
  showBottom.value = !showBottom.value;
  console.log(showBottom.value);
};

const add=()=>{
  router.push('/addcaregiver')
}
const changeCare=(_id:string)=>{
  router.push({
    path: '/certificateDetail',
    query: {
      _id
    }
  })
}
</script>

<style scoped lang="scss">
.mycertificate {
  width: 100vw;
  height: 100vh;
  background-color: rgb(242, 242, 236);
  overflow: hidden;
  .content {
    width: 100%;
    height: calc(100% - 50px);
    box-sizing: border-box;
    margin-top: 60px;

    .content-header {
      width: 90%;
      height: 50px;
      border-radius: 10px;
      margin-left: 5%;
      display: flex;
      justify-content: space-between;
      padding: 0px 10px;
      align-items: center;
      background-color: white;
      box-sizing: border-box;
    }
    .content-title {
      background-color: rgb(242, 242, 236);
      width: 90%;
      height: 50px;
      margin-left: 5%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0px 5px;
      box-sizing: border-box;
    }
    .content-item {
      width: 90%;
      background-color: white;
      //   height: 160px;
      margin-left: 5%;
      padding: 15px;
      box-sizing: border-box;
      border-radius: 10px;
      margin-top: 20px;
      .item-header {
        display: flex;
        justify-content: space-around;
        align-items: center;
        .item-header-title {
          display: flex;
          justify-content: space-between;
        }
      }
      button {
        border: none;
      }
    }
  }
  .popup {
    width: 100%;
    h2 {
      line-height: 50px;
      font-size: 16px;
      text-align: center;
    }
    .popupView {
      width: 90%;
      margin-left: 5%;
      margin-top: 15px;
      display: flex;
      justify-content: start;
      align-items: center;
      padding: 20px 20px;
      background-color: rgb(220, 244, 255);
      box-sizing: border-box;
      border-radius: 10px;
    }
  }
}
</style>